<template>
  <el-input
    placeholder="统计开始时间"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-input
    placeholder="统计结束时间"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-select class="search" v-model="value" placeholder="统计维度">
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item"
      :value="item"
    ></el-option>
  </el-select>
  <el-select class="search" v-model="value1" placeholder="租户类型">
    <el-option
      v-for="(item, index) in options1"
      :key="index"
      :label="item"
      :value="item"
    ></el-option>
  </el-select>
  <el-button type="primary">查询</el-button>
  <el-button>重置</el-button>
  <div ref="chartRef" style="width: 100%; height: 500px"></div>
  <div ref="chartRef1" style="width: 100%; height: 500px"></div>
  <div ref="chartRef2" style="width: 100%; height: 500px"></div>
</template>
<script>
import { onMounted, reactive, ref } from 'vue'
import * as echarts from 'echarts'
export default {
  setup() {
    const chartRef = ref(null)
    const chartRef1 = ref(null)
    const chartRef2 = ref(null)
    onMounted(() => {
      const chart = echarts.init(chartRef.value)
      const chart1 = echarts.init(chartRef1.value)
      const chart2 = echarts.init(chartRef2.value)
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320,1500,1212,2334,1232,343,3432,2323],
            type: 'line',
            areaStyle: {},
          },
        ],
      }
      chart.setOption(option)
      const option1 = {
        xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
}
      chart1.setOption(option1)
      const option2 = {
        tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
    }
chart2.setOption(option2)
    })
    var value = ref('')
    var value1 = ref('')
    const options = reactive(['租房', '转租', '退租', '续租'])
    const options1 = reactive(['个人', '企业'])
    return { options, options1, value, value1, chartRef,chartRef1,chartRef2 }
  },
}
</script>
<style>
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}
</style>